<template>
	<view class="qilin-newsContent">
		<view class="qilin-newsContent-menu">
			<view class="qilin-newsContent-menu-item" v-for="item in menuList" :key="item.title">
				<image :src="item.src"></image>
				<text>{{item.title}}</text>
			</view>
		</view>
		<view class="qilin-newsContent-record">
			<view class="qilin-newsContent-record-item" v-for="item in messageList" :key="item.name">
				<image src="../static/imgs/avator.jpg"></image>
				<view class="qilin-newsContent-record-item-msg">
					<view class="qilin-newsContent-record-item-msg-info">
						<view>{{item.name}}</view>
						<view>{{item.littleMsg}}</view>
					</view>
					<view class="qilin-newsContent-record-item-msg-time">{{item.dateTime}}</view>
				</view>
			</view>
			<view class="qilin-newsContent-record-tip">无更多消息</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"newsContent",
		data() {
			return {
				menuList:[
					{
						src:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1gwh2bp2ucjj30g40cst8y.jpg",
						title:"粉丝"
					},
					{
						src:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1gwh2bp2ucjj30g40cst8y.jpg",
						title:"赞"
					},
					{
						src:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1gwh2bp2ucjj30g40cst8y.jpg",
						title:"评论和@"
					},
					{
						src:"https://wx1.sinaimg.cn/bmiddle/006aaKeggy1gwh2bp2ucjj30g40cst8y.jpg",
						title:"随拍互动"
					}
				],
				messageList:[
					{
						name:"抖音小助手",
						littleMsg:"2022年之舞",
						dateTime:"星期日"
					},
					{
						name:"用户4328931238184",
						littleMsg:"和用户4328931238184打个招呼吧",
						dateTime:"08-06"
					},
					{
						name:"系统消息",
						littleMsg:"来抖音舞厅涨人气哦~",
						dateTime:"07-26"
					}
				]
			};
		}
	}
</script>

<style>
.qilin-newsContent{
	padding-top:120rpx;
	color:#fff;
}
.qilin-newsContent-menu{
	display:flex;
	flex-flow:row nowrap;
	padding:30rpx 20rpx;
}
.qilin-newsContent-menu-item{
	flex:1;
	text-align:center;
	display:flex;
	flex-flow:column nowrap;
	align-items:center;
	font-size:24rpx;
}
.qilin-newsContent-menu-item>image{
	width:80rpx;
	height:80rpx;
}
.qilin-newsContent-menu-item>text{
	margin-top:10rpx;
}
.qilin-newsContent-record{
	border-top:1rpx solid #333;
	padding:20rpx 0;
}
.qilin-newsContent-record-item{
	padding:20rpx 20rpx;
	display:flex;
	flex-flow:row nowrap;
	justify-content:sapce-between;
	color:#fff;
}
.qilin-newsContent-record-item>image{
	width:80rpx;
	height:80rpx;
	border-radius:50%;
}
.qilin-newsContent-record-item-msg{
	flex:1;
	display:flex;
	justify-content:space-between;
	padding:0 20rpx;
}
.qilin-newsContent-record-item-msg-info>view:first-child{
	font-size:26rpx;
}
.qilin-newsContent-record-item-msg-info>view:last-child{
	font-size:20rpx;
	color:#ccc;
	margin-top:8rpx;
}
.qilin-newsContent-record-item-msg-time{
	font-size:20rpx;
	color:#ccc;
	padding-top:10rpx;
}
.qilin-newsContent-record-tip{
	color:#ccc;
	font-size:22rpx;
	margin-top:20rpx;
	text-align:center;
}
</style>
